<template>
	<view class="new-outstock-order-page">
		<view class="title">出库信息</view>
		<view class="outstock-info c-panel">
			<view class="item order-num  c-flex jc-between line">
				<text>订单编号</text>
				<input v-model="orderCode" placeholder="请输入订单编号" style="width: 62%;"/>
			</view>
			<view class="item c-flex jc-between line" @click="onOpenDialog(1)">
				<text>出库方</text>
				<text><text>{{stockOut.name||'请选择'}}</text><text class="down-arrow"></text></text>
			</view>
			<view class="item  c-flex jc-between" @click="onOpenDialog(2)">
				<text>收货方</text>
				<text><text>{{stockIn.name||'请选择'}}</text><text class="down-arrow"></text></text>
			</view>
		</view>
		<view class="title">产品数量</view>
		<view class=" c-panel product-list c-flex c-flex-col">
			<view class="p-item c-flex jc-between" v-for="(item,i) in productList" :key="i">
				<view class="c-flex">
					<image :src="orderImgUrl+'gas-bottle.png'" mode=""></image>
					<view class="c-flex c-flex-col">
						<view class="name">{{item.name}}</view>
						<!-- <view class="num">剩余气瓶：{{item.volume}}</view> -->
					</view>
				</view>
				<uni-number-box  v-model="item.value" :min="0" :max="10000"/>

			</view>
		</view>
		<view class="submit-bt" @click="onSubmit">确定</view>
		
		<!-- 弹框 -->
		<uni-popup ref="type_popup" type="bottom" :custom="true" :mask-click="true"
							 background-color="rgba(0,0,0,0)" style="border-top-left-radius: 50rpx;" :safe-area="false">
			<view class="pop-content">
				<view class="header c-flex jc-between">
					<view @tap='sure(0)'>取消</view>
					<view @tap='sure(1)'>确定</view>
				</view>
				<view class="search-con c-flex jc-start c-item-center">
					<view class="input-con c-flex jc-start c-item-center">
						<image src="@/static/images/common/find-icon.png" style="width: 42rpx;max-height: 42rpx;"></image>
						<input class="uni-input" v-model="searchInfo" name="text" confirm-type="search" 
										placeholder="请输入名称..." @confirm="onInputChange" @input="onInputChange"/>
					</view>
				</view>
				<picker-view :indicator-style="indicatorStyle" :value="popValue" @change="onDataChange" 
										 @pickstart="pickstart" @pickend="pickend" 
										 class="tower_type">
					<picker-view-column >
						<view class="item c-flex c-item-center jc-center" v-for="(item,index) in popList"
							:key="index">
							{{dialogType != 3?item.name:item.label}}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>	
	</view>
</template>

<script>
	import {getDateStr} from '@/utils/utils.js';
	export default {
		data() {
			return {
				orderImgUrl: this.$API.IMG_URL + '/gas/yehuaqi/order/',
				indicatorStyle: `height: 50px;line-height:50px;`,
				searchInfo:'',
				orderCode:'',
				popIndex:0,
				isMoving:false,
				dialogType:1,
				stockList:[],
				stockIn:{id:'',name:''},
				stockOut:{id:'',name:''},
				popList:[],
				productList:[
					// {name:'15KG气瓶',num:55,value:0},{name:'20KG气瓶',num:55,value:0},{name:'30KG气瓶',num:55,value:0}
				]
			};
		},
		onLoad() {
			this.initCode();
			this.findStock();
			this.findProductList();
		},
		methods:{
			initCode(){
				let date = getDateStr(new Date());
				let num = Math.floor(Math.random()*10000);
				this.orderCode = `OS${date}${num}`;
			},
			findStock(){
				const tenantId = uni.getStorageSync('tenantId');
				this.$API.findWarehouseList({page:1,limit:999,tenantId:tenantId}).then(res=>{
					this.stockList = res.page.list;
				});
			},
			findProductList(){
				this.$API.findLpgsku({}).then(res=>{
					this.productList = res.page.list.map(item=>{
						item['value'] = 0;
						return item
					});
				});
			},
			//提交
			onSubmit(){
				let title = '';
				if(!this.orderCode){
					title = '订单号不能为空!';
				}
				if(!this.stockOut.id){
					title = '出库方不能为空!';
				}
				if(!this.stockIn.id){
					title = '收货方不能为空!';
				}
				if(title){
					uni.showToast({
						title:title,
						icon:'error'
					});
					return;
				}
				const params = {sourceType:'WAREHOUSE',targetType:'WAREHOUSE',stockType:5,code:this.orderCode,
												source:this.stockOut.id,target:this.stockIn.id};
				params['productDetails'] = this.productList.filter(item=>{return item.value >0}).map(item=>{
					return {productId:item.id,planSingle:item.value}
				});
				this.$API.saveStockBill(params).
				then(res=>{
					uni.showToast({title:'操作成功!'});
					uni.navigateBack({delta:1});
				});
			},
			pickstart() {
				this.isMoving = true;
			},
			pickend() {
				this.isMoving = false;
			},
			/**
			 * 确定选择
			 * @param {Object} type
			 */
			sure(type){
				if (this.isMoving) {
						console.log('运动中，不能点击哦')
						return;
				}
				if(type==1){
						let data = this.popList[this.popIndex];
						if(this.dialogType == 1){
							this.stockOut.name = data.name;
							this.stockOut.id = data.id;
						}
						if(this.dialogType == 2){
							this.stockIn.name = data.name;
							this.stockIn.id = data.id;
						}
				}
				this.$refs.type_popup.close();
			},
			onOpenDialog(type){
				this.dialogType = type;
				if(type == 1){
					this.popList = [...this.stockList];
				}
				this.$refs.type_popup.open();
			},
			//弹框选择
			onDataChange(e){
				this.popIndex = e.detail.value[0];
			},
			onInputChange(){
				if(this.searchInfo){
					this.popList = this.stockList.filter(item =>{return item.name.indexOf(this.searchInfo)!=-1});
				}else{
					this.popList = [...this.stockList];
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.new-outstock-order-page{
	padding:38rpx 24rpx;
	.title{
		font-weight: 600;font-size: 30rpx;color: #333333;position:relative;padding-left: 36rpx;
		&::after{
			content: '';display: inline-block;  position: absolute;    padding-left: 12rpx;
			width: 22rpx;height: 12rpx;background-image: linear-gradient(#F18858 10%, #E86547 50%);
			left: 8rpx;top: 8px;border-top-left-radius: 7rpx;border-bottom-right-radius: 7rpx;transform: rotate(-262deg);
		}
	}
	.c-panel{background: #FFFFFF;border-radius: 20rpx;padding: 32rpx 32rpx 0;margin:28rpx 0 24rpx;}
	.outstock-info{
		.order-num{
			input{text-align: right;}
		}
		.item{
			padding-bottom:24rpx;padding-right: 20rpx;margin-bottom: 24rpx;
			text:first-child{font-weight: 500;font-size: 28rpx;color: #676767;}
			text:last-child{font-weight: 500;font-size: 28rpx;color: #9B9B9B;}
		}
		.line{border-bottom:1px solid #F7F7F7;}
		 .down-arrow {
				width: 18rpx;height: 18rpx;border-width: 2px 2px 0 0;
				border-color: #9B9B9B;border-style: solid;
				-webkit-transform: matrix(0.51, 0.51, 0.51, -0.51, 5, 1);
				transform: matrix(0.51, 0.51, 0.51, -0.51, 5, 1);position: absolute;
		  }
	}
	.product-list{
		gap:66rpx;padding: 32rpx;height: 50vh;overflow-y: auto;
		.p-item{
			image{width: 82rpx;height: 94rpx;margin-right:24rpx;}
			.name{font-weight: 500;font-size: 28rpx;color: #333333;margin-bottom:12rpx;}
			.num{font-weight: 400;font-size: 24rpx;color: #333333;}
		}
	}
	.submit-bt{
		width: 710rpx;height: 84rpx;line-height: 84rpx;text-align: center;position: absolute;bottom: 60rpx;
		background: linear-gradient( 180deg, #F18858 0%, #E86547 100%);
		border-radius: 16rpx;border: 2rpx solid #E96949;color:#ffffff;
	}
	.picker-view {width: 750rpx;height: 500rpx;margin-top: 20rpx;}
	.search-con{
		margin: 0 36rpx;padding: 10rpx;background: #f3f3f3;border-radius: 20rpx;
		.input-con{    width: 100%;height: 60rpx;}
	}
	.pop-content{
		background: #fff;border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;border: 1rpx solid #fff;position: relative;
		.header{
			font-size: 28rpx;font-weight: 500;padding: 30rpx;
			view:first-child{color:#666666;}
			view:last-child{color: #2986FF;}
		}
		
		.item {height: 50px;align-items: center;justify-content: center;text-align: center;}
	}
}
</style>
<style>
	.uni-numbox-btns{width: 40rpx!important; height: 40rpx!important;padding: 0!important;}
	.uni-numbox__plus ,.uni-numbox__minus{border-radius: 50%!important; border: 1px solid #E86647;}
	.uni-numbox__value{color:#000000!important;}
	.uni-numbox--text{color: #E86647!important;}
	
	/*修改提示文字的颜色*/
	input::-webkit-input-placeholder {color: #9B9B9B;}
	input:-moz-placeholder {color: #9B9B9B;}
	input::-moz-placeholder { color: #9B9B9B;}
	input:-ms-input-placeholder { color: #9B9B9B;}
</style>